import { useEffect, useMemo, useState } from "react";
import styles from "./index.less";
import Tabbar from "@/components/Tabbar";
import { useDispatch, useSelector } from "umi";
import { Checkbox, Button, Stepper, Dialog } from "antd-mobile";
export default function Page() {
  const dispatch = useDispatch();

  const items = useSelector((state: any) => state.cart.items);
  const price = useSelector((state: any) => state.cart.price);
  const number = useSelector((state: any) => state.cart.number);
  // 计算全选
  const allChecked = useMemo(() => {
    return items.every((item: Item) => item.selected);
  }, [items]);
  // 初始化时请求购物车数据
  useEffect(() => {
    dispatch({
      type: "cart/getCartInfo",
    });
  }, []);
  // 修改购物车 商品购买数量
  const changeNum = (key: string, number: number) => {
    dispatch({
      type: "cart/changeNum",
      params: {
        key,
        number,
      },
    });
  };

  // 删除状态
  const [delStatus, setDelStatus] = useState(false);
  // 删除商品
  const delItem = () => {
    // 弹出确认框
    Dialog.confirm({
      title: "删除",
      content: "确定删除该商品吗?",
    }).then((isConfirm: boolean) => {
      if (isConfirm) {
        // 删除
        // 得到所有选中商品的key
        const keys: string[] = [];
        items
          .filter((item: Item) => item.selected)
          .forEach((item: Item) => {
            keys.push(item.key as string);
          });

        dispatch({
          type: "cart/remoItem",
          params: {
            key: keys.join(","),
          },
        });
      }
    });
  };
  // 修改商品的选中状态
  const changeItemSelectStatus = (key: string, selected: boolean) => {
    dispatch({
      type: 'cart/changeItemSelectedStatus',
      params: {
        key,
        selected
      }
    })
  }
  // 全选切换 改变 单个商品状态
  const allCheckedChange = (allChecked: boolean) => {
    const keys: string[] = [];
    items.forEach((item: Item) => {
      keys.push(item.key as string)
    })
    changeItemSelectStatus(keys.join(','), allChecked)
    
  }
  return (
    <>
      {/* 顶部操作栏 */}
      <div className={styles["action-bar"]}>
        <span>总数量:{number}</span>
        <span
          onClick={() => {
            setDelStatus(!delStatus);
          }}
        >
          {delStatus ? "删除" : "操作"}
        </span>
      </div>
      {/* /顶部操作栏 */}
      {/* 商品容器 */}
      <div className={styles["item-container"]}>
        {items.map((item: Item) => (
          <div className="item" key={item.goodsId}>
            <Checkbox
              checked={item.selected}
              onChange={(checked: boolean) => {
                changeItemSelectStatus(item.key as string, checked)
              }}
            />
            <img src={item.pic} className="item-img" alt="" />
            <div className="info">
              <h5>商品名:{item.name}</h5>
              <div className="action">
                <p>价格:￥{item.price}</p>
                <Stepper
                  value={item.number}
                  min={1}
                  onChange={(value: number) => {
                    changeNum(item.key as string, value);
                  }}
                />
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* /商品容器 */}
      {/* 提交订单栏 */}
      <div className={styles["order-bar"]}>
        <div className="order-fl">
          全选：
          <Checkbox
            checked={allChecked}
            onChange={(checked) => {
              allCheckedChange(checked)
            }}
          />
          总价格：{price}
        </div>
        {delStatus ? (
          <Button color="danger" onClick={delItem} size="middle">
            删除
          </Button>
        ) : (
          <Button color="danger" size="middle">
            提交订单
          </Button>
        )}
      </div>
      {/* /提交订单栏 */}
      <Tabbar />
    </>
  );
}
